<template>

	<view class="image_v">
		<image :class="image_class" :src="src" mode="scaleToFill"></image>
		<br>
		<text :class="text_class">{{title}}</text>
	</view>

</template>

<script>
	let that;
	var data = {
		image_class: "small_image",
		text_class: "small_text",
		// title: "染发后",
		height: wx.getSystemInfoSync().windowHeight || window.innerHeight,
		width: wx.getSystemInfoSync().windowWidth || window.innerHeight,
		header: {
			"session": ""
		}
	};

	export default {
		name: "aaahear-image",
		props: ["title", "src", "shadowBool"],
		data() {
			return data;
		},
		mounted() {
			if (this.height > 740) {
				this.image_class = "big_image";
				this.text_class = "big_text";
			} else {
				this.image_class = "small_image";
				this.text_class = "small_text";
			}

			that = this;

		},
		onLoad() {

		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.image_v {
		position: relative;
		text-align: center;
background: linear-gradient(145deg, #00b6ff, #0099e6);
box-shadow:  33px 33px 66px #008dd4, 
             -33px -33px 66px #00c7ff;
		padding: 10rpx;
		padding-bottom: 55rpx;
		border-radius: 30rpx;
		left:80rpx;
		
		
	}

	text {
		position: absolute;
		color: rgba(255, 255, 255, .8);
		opacity: .8;
		// text-shadow: 0 0 5rpx $global-color;
		background-color: rgba(67, 149, 255, .6);
		box-shadow: 10rpx solid rgba(67, 149, 255, .6);
		width: 170rpx;
		font-size: 30rpx;
		border-radius: 10rpx 20rpx 10rpx 20rpx;
background: #00aaff;
box-shadow: inset 5px 5px 10px #007cba, 
            inset -5px -5px 10px #00d8ff;
	}

	.small_text {
		bottom: 10rpx;
		right: 30rpx;
	}

	.big_text {
		bottom: 10rpx;
		right: 30rpx;
	}

	image {
		background-color: rgba(255,255,255,0.1);
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		border: 0rpx solid rgba(67, 149, 255, .6);
	}

	.small_image {
		width: 300rpx;
		height: 400rpx;
	}

	.big_image {
		width: 350rpx;
		height: 475rpx;
	}
</style>
